<template>
  <div>
    <header> 
      <button @click="back">返回</button>
    {{ detailInfo.title }}
    </header>
    <main>
      <!-- 动态的数据需要加 冒号 绑定 -->
      <img  width="100%" height="240px"  :src="detailInfo.img" alt="">
    </main>
  </div>
 
</template>

<script>
//引入axios 
import axios from 'axios'
export default {
  data() {
    return {
      detailInfo: {

      }
    }
  },
  created() { 
    // this.$router
    // this.$route 当前页面的路由信息
    axios.get('/getDetail', {
      params: {
        id:this.$route.query.id
      }
    }).then(res => {
      // 请求成功 将结果保存到 detailInfo数组里
      this.detailInfo = res.data
    })
    // console.log(this.$route.query.id);
    // console.log(this.$route.query.title);
  },
  methods: {
    back() {
      //返回
      this.$router.back()
    }
  }
}
</script>

<style>

</style>